import React, { Component } from 'react';
import { Button } from 'antd';
import PropTypes  from 'prop-types';


export default class Counter extends Component{
  static propTypes = {
    count: PropTypes.number.isRequired,
    increase: PropTypes.func.isRequired,
    decrease: PropTypes.func.isRequired,
    decreaseAsync:PropTypes.func.isRequired,
  }

  increase = () =>{
    const number = this.select.value;
    // 调用store的方法更新状态
    this.props.increase(number);
  }
  decrease = () =>{
    const number = this.select.value;
    this.props.decrease(number);
  }

  decreaseAsync = () =>{
    const number = this.select.value;
    // 调用store的方法更新状态
    // setTimeout(() => {
    //   this.props.increase(number);
    // }, 1000);
    this.props.decreaseAsync(number);
  }

  render(){
    const {count} = this.props;
    return(
      <div>
        <h3>number is {count} </h3>
        <select ref={select => this.select = select}>
          <option value="1">1</option>
          <option value="3">3</option>
          <option value="4">4</option>
        </select>
        <Button onClick={this.increase}>+</Button>
        <Button onClick={this.decrease}>-</Button>
        <Button onClick={this.decreaseAsync}>async+</Button>
      </div>
    );
  }
}